<!-- 通知公告 -->
<template>
  <div class="module_">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='80px' inline autocomplete="off"  :model="pageparm" class="search_box">
          <el-form-item label="标题">
            <el-input size="medium" clearable v-model="pageparm.title" placeholder="请输入标题搜索"/>
          </el-form-item>
          <el-form-item label="消息类型">
            <el-select size="medium" v-model="pageparm.type"  clearable @change="searchChane($event,'type')">
              <el-option label="系统信息" value="1"></el-option>
              <el-option label="通知公告" value="2"></el-option>
            </el-select>
          </el-form-item> 
          <!-- <el-form-item label="发布人">
            <inputSearch :options="{type:'search'}" ref="search_e" placeholder="请输入发布人姓名搜索" @onChange='searchChane($event,"sender_id")'  />
          </el-form-item> -->
          <el-form-item>
            <el-checkbox v-model="pageparm.is_read" label="未读消息"  size="small" :true-label='1' :false-label='null' @change='searchChane($event,"is_read")'></el-checkbox>
          </el-form-item>
        </el-form>
      </search>
    </div>
    <el-table
      :data="tableData"
      height="100%"
      size="medium"
      border
      highlight-current-row
      v-loading="tableLoading"
      @sort-change="tableSortChange"
      @row-click='godetail'
      :row-class-name="setBgColor">
      <el-table-column
        v-for="(v) in headerList"
        :key="v.prop"
        align="center"
        :prop="v.prop"
        :label="v.label"
        :min-width="v.width"
        sortable="custom">
        <template slot-scope="scope">
          <template v-if="v.prop === 'sender_name'">{{scope.row.sender_name || '系统'}}</template>
          <template v-else>{{scope.row[v.prop]}}</template>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="is_read"
        label="是否查看"
        width="120">
        <template slot-scope="scope">
          <span>{{scope.row.is_read === 1 ? '未读' : '已读'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="is_top"
        label="是否置顶"
        width="120">
        <template slot-scope="scope">
          <span>{{scope.row.is_top === 1 ? '已置顶' : '未置顶'}}</span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

    <articleDialog ref="articleDialog" :info='info'/>
  </div>
</template>

<script>
import {
  ApimessagesInfo,
  Apimessages
} from "@/api";
import { debounce} from "@/utils";
import {headerList} from '../js/notice'
import articleDialog from "../components/articleDialog.vue"

export default {
  components:{
    articleDialog
  },
  data() {
    return {
      tableData: [],
      editFormVisible: false,
      editForm: {}, //修改
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null,
        sort_order: null,
      },
      tableLoading: false,

      headerList,
      info:{
        employee:{}
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    setBgColor(row){
      if(row.row.is_top === 1){
        return 'istopstyle'
      }
    },
    godetail(val){
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      ApimessagesInfo(val.id).then(({data}) => {
        this.info = data
        this.$refs.articleDialog.showArticle = true
        if(val.is_read === 1)this.getList();
      }).finally(() => {
        loading.close();
      });
    },
    handle(index, item, i) {
      this.editForm = { ...item };
      this.editFormVisible = true;
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      } else {
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      if (column.prop.includes(".")) {
        this.pageparm.sort_str = 'sub_' + column.prop.split(".")[0] + "s_id";
      }
      this.getList();
    },
    //搜索
    searchChane: debounce(function(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },500,false),
    clearSearch(){
      this.$refs.search_e.clear()
      this.pageparm.is_read = null
    },
    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      Apimessages(this.pageparm)
        .then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // deleteUser(index, value) {
    //   this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       const loading = this.$loading({
    //         lock: true,
    //         text: "删除中...",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)",
    //       });
    //       ApidisinfectcostDel(value.id)
    //         .then((res) => {
    //           this.getList(true);
    //           this.$message({
    //             type: "success",
    //             message: "删除成功!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // submit: debounce(
    //   function () {
    //     //提交  修改或新增
    //     const editForm = { ...this.editForm };
    //     for(const key of this.rules){
    //       if(!editForm[key] && editForm[key] !== 0){
    //         this.$message.error("请填写必填信息");
    //         return;
    //       }
    //     }
    //     for (const key in editForm) {
    //       if(!editForm[key] && editForm[key] !== 0){
    //         editForm[key] = 0
    //       }
    //     }
    //     const loading = this.$loading({
    //       lock: true,
    //       text: "加载中...",
    //       spinner: "el-icon-loading",
    //       background: "rgba(0, 0, 0, 0.7)",
    //     });
    //     if (editForm.id) {
    //       //有ID就是修改
    //       ApidisinfectcostPut(editForm, editForm.id)
    //         .then((res) => {
    //           this.$message({
    //             type: "success",
    //             message: "修改成功!",
    //           });
    //           this.editFormVisible = false;
    //           this.getList(true);
    //         })
    //         .catch(() => {
    //           this.$message({
    //             type: "error",
    //             message: "修改失败!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     } else {
    //       ApidisinfectcostAdd(editForm)
    //         .then((res) => {
    //           this.$message({
    //             type: "success",
    //             message: "添加成功!",
    //           });
    //           this.editFormVisible = false;
    //           this.getList(true);
    //         })
    //         .catch(() => {
    //           this.$message({
    //             type: "error",
    //             message: "添加失败!",
    //           });
    //         })
    //         .finally(() => {
    //           loading.close();
    //         });
    //     }
    //   },
    //   500,
    //   true
    // ),
  },
};
</script>

<style lang='less' scoped>
</style>